<template>
  <div>
    <zk-navbar :title="areaName + '车位'" customLeftClick @leftClick="navLeftClick" />
    <div class="lot-searchbar">
      <div class="lot-searchinputbar">
        <img class="lot-searchimg" :src="require('../assets/images/ic_search2.png')" />
        <input class="lot-searchinput" v-model="searchKey" placeholder="请输入车位编号查找" />
      </div>
      <div class="lot-search" @click="searchClick">查找</div>
    </div>
    <div class="selectLot-scrollbar">
      <div
        class="selectLot-itembar"
        v-for="(item,index) in dataList"
        :key="index"
        @click="chooseClick(item)"
      >
        <div class="selectLot-left">{{item.parklotId}}</div>
        <div class="selectLot-right" v-if="item.status == 1">空闲</div>
        <div class="selectLot-right" v-else-if="item.status == 2">待申请</div>
        <div class="selectLot-right" v-else-if="item.status == 3">待结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {

  props: {
    areaId: String,
    areaName: String
  },

  data() {
    return {
      searchKey: null,
      dataList: []
    }
  },

  mounted() {
    this.takeData();
  },

  methods: {
    navLeftClick() {
      this.$emit("hideMenu");
    },

    searchClick(e) {
      this.takeData(this.searchKey);
    },

    takeData(searchKey) {
      var page = this;
      api.request.getParkEmptyList(true, this.areaId, 0, searchKey).then(function (data) {
        page.dataList = data.list;
      }).catch(function (reason) {
        api.toast(reason);
      });
    },

    chooseClick(item) {
      this.$emit("itemClick", item.parklotId);
    },
  }
}
</script>

<style scoped>
.lot-searchbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 1rem;
  height: 1rem;
  padding: 0 0.16rem;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.lot-searchinputbar {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f7f8fa;
  border-radius: 0.03rem;
}

.lot-searchimg {
  padding-left: 0.16rem;
  width: 0.3rem;
  height: 0.3rem;
}

.lot-searchinput {
  padding: 0.14rem 0.16rem;
  border: none;
  background-color: #f7f8fa;
  font-size: 0.3rem;
}

.lot-search {
  margin-left: 0.16rem;
  padding: 0 0.3rem;
  border-radius: 0.05rem;
  line-height: 0.64rem;
  background: dodgerblue;
  color: white;
  font-size: 0.28rem;
}

.selectLot-scrollbar {
  position: fixed;
  top: 2rem;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.selectLot-itembar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: solid #eee 0.03rem;
  background-color: #fff;
}

.selectLot-itembar:active {
  background-color: #eee;
}

.selectLot-left {
  margin-left: 0.3rem;
  padding: 0.18rem 0.24rem;
  color: #333;
  font-size: 0.4rem;
}

.selectLot-right {
  margin-right: 0.3rem;
  padding: 0.18rem 0.24rem;
  color: #333;
  font-size: 0.4rem;
}
</style>